<template>
  <div class="Index">
    <van-tabs v-model="active">
      <div class="city" @click="GoCity()">{{CityName==null? "北京":CityName}}</div>
      <van-tab
        v-for="(item,index) in tabData"
        :key="index"
        :title="item.title"
        :to="{name:item.routeName}"
      >
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: "Index",

  data() {
    return {
      CityName: null,
      CityId: 0,
      active: 0,
      tabData: [
        {
          title: "热映",
          routeName: "index_hot"
        },
        {
          title: "影院",
          routeName: "index_yingyuan"
        },
        {
          title: "待映",
          routeName: "index_daiying"
        },
        {
          title: "经典电影",
          routeName: "index_jingdian"
        }
      ]
    };
  },
  created() {
    if (localStorage.getItem("historyCity")) {
      this.CityId = JSON.parse(localStorage.getItem("historyCity")).cityid;
      this.CityName = JSON.parse(localStorage.getItem("historyCity")).cityname;
    }
  },
  mounted() {},
  methods: {
    GoCity() {
      this.$router.push({ name: "City" });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-tabs {
  background-color: rgb(255, 255, 255);
}
/deep/.van-tabs__wrap {
  width: 88vw;
}
.city {
  position: absolute;
  top: 13px;
  right: 10px;
  background-color: rgb(255, 255, 255);
}
</style>